<template>
	<div class="customBanner-box">
		<div style="width: 50%">
			<n-steps :current="current" status="process" style="margin-bottom: 16px">
				<n-step title="选择展示站点" />
				<n-step title="填写Banner信息" />
			</n-steps>
		</div>
		<div class="customBanner-box-info">
			<div class="customBanner-box-info-content">
				<div class="customBanner-box-info-content-box">
					<checkCity
						ref="checkCityRef"
						:style="{ display: current === 1 ? 'block' : 'none' }"
					></checkCity>

					<div>
						<div :style="{ display: current === 2 ? 'block' : 'none' }">
							<n-form
								:model="bannerInfoForm"
								label-placement="left"
								:label-width="125"
								size="small"
								require-mark-placement="right-hanging"
								:style="{
									maxWidth: '532px'
								}"
							>
								<n-form-item label="Banner类型：">
									<span>自定义</span>
								</n-form-item>
								<n-form-item path="channel" label="投放渠道(可多选)：">
									<div style="margin-top: 8px">
										<n-checkbox-group v-model:value="bannerInfoForm.channel">
											<n-space item-style="display: flex;">
												<n-checkbox value="1" label="达人营小程序" />
												<n-checkbox value="2" label="达人营APP" />
											</n-space>
										</n-checkbox-group>
										<p class="tips">若多选投放渠道，新增后将拆分成多条渠道banner数据进行管理</p>
									</div>
								</n-form-item>

								<n-form-item path="positionType" label="展示位置：">
									<n-radio-group v-model:value="bannerInfoForm.positionType" name="radiogroup">
										<n-space>
											<n-radio :value="1">探店</n-radio>
											<n-radio :value="2">素材圈</n-radio>
										</n-space>
									</n-radio-group>
								</n-form-item>
								<n-form-item path="name" label="Banner名称：">
									<n-input
										v-model:value="bannerInfoForm.name"
										type="text"
										placeholder="请输入Banner名称："
									/>
								</n-form-item>
								<n-form-item label="Banner时效：">
									<n-date-picker
										type="datetimerange"
										format="yyyy-MM-dd HH:mm:ss"
										value-format="yyyy-MM-dd HH:mm:ss"
										clearable
										:is-date-disabled="updateDisablePreviousDate"
										@update:value="dateTimeChange"
									/>
								</n-form-item>
								<n-form-item path="linkUrl" label="URL链接(选填)：">
									<n-input
										v-model:value="bannerInfoForm.linkUrl"
										type="text"
										placeholder="请输入URL链接"
									/>
								</n-form-item>
								<n-form-item label="展示图片：">
									<pictureCropper
										ref="pictureCropperRef"
										:width="presetMode.width"
										:height="presetMode.height"
										@commit="successUpload"
									></pictureCropper>
								</n-form-item>
							</n-form>
						</div>
					</div>
				</div>
			</div>
			<div class="customBanner-box-info-btn">
				<div v-if="current == 1">
					<n-button type="info" @click="next">下一步</n-button>
				</div>
				<div v-if="current == 2">
					<n-button strong secondary style="margin-right: 10px" @click="current = 1">
						上一步
					</n-button>
					<n-button type="info" :disabled="buttonLoading" :loading="buttonLoading" @click="confirm">
						确定
					</n-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { useMessage } from 'naive-ui';
import dayjs from 'dayjs';
import checkCity from './checkCity.vue';
import { addCustomBanner } from '@/api/bannerMange';
import { useRouter, useRoute } from 'vue-router';
import pictureCropper from './pictureCropper';
const pictureCropperRef = ref();
const presetMode = reactive({
	width: 750,
	height: 522
});
const message = useMessage();
const router = useRouter();
const route = useRoute();

const buttonLoading = ref(false);
const Emits = defineEmits(['changImage', 'changPositionType']);
const checkCityRef = ref();
const current = ref(1);
const bannerInfoForm = reactive({
	channel: [],
	content: '', //图片链接
	linkUrl: '', //URL链接
	locationIds: [],
	endTime: null,
	startTime: null,
	name: '',
	type: 2,
	positionType: 1
});
const updateDisablePreviousDate = (ts) => {
	// Banner时效：禁用
	let date = new Date();
	return (
		ts < new Date(date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()).getTime()
	);
};

watch(
	() => bannerInfoForm.positionType,
	(val) => {
		if (val == 1) {
			presetMode.width = 750;
			presetMode.height = 522;
		} else {
			presetMode.width = 710;
			presetMode.height = 322;
		}
		if (bannerInfoForm.type === 1) {
			if (currentProductItem.value) {
				// 产品图
				bannerInfoForm.content = currentProductItem.value.content;
			}
		} else {
			pictureCropperRef.value.changeImageUrl = '';
			bannerInfoForm.content = '';
		}
		Emits('changImage', bannerInfoForm.content);
		Emits('changPositionType', val);
	}
);

const dateTimeChange = (val) => {
	// Banner时效：
	if (val) {
		bannerInfoForm.startTime = dayjs(val[0])
			.set('hour', 0)
			.set('minute', 0)
			.set('second', 0)
			.format('YYYY-MM-DD HH:mm:ss');
		bannerInfoForm.endTime = dayjs(val[1])
			.set('hour', 23)
			.set('minute', 59)
			.set('second', 59)
			.format('YYYY-MM-DD HH:mm:ss');
	} else {
		bannerInfoForm.startTime = null;
		bannerInfoForm.endTime = null;
	}
};
const next = () => {
	if (!checkCityRef.value.checkAllCities.length) {
		message.error('请选择站点');
		return;
	}
	current.value = 2;
};
const successUpload = (url) => {
	bannerInfoForm.content = url;
	Emits('changImage', url);
};
const confirm = () => {
	bannerInfoForm.locationIds = checkCityRef.value.checkAllCities;
	if (!bannerInfoForm.channel.length) {
		message.error('请选择投放渠道');
		return;
	}
	if (!bannerInfoForm.name) {
		message.error('请输入Banner名称：');
		return;
	}
	if (!bannerInfoForm.locationIds.length) {
		message.error('请选择站点');
		return;
	}
	if (!bannerInfoForm.startTime && !bannerInfoForm.endTime) {
		message.error('请选择时效');
		return;
	}
	if (!bannerInfoForm.content) {
		message.error('请选择上传图片');
		return;
	}
	// 确定保存
	let params = {
		...bannerInfoForm
	};
	buttonLoading.value = true;
	let admin = route.query.admin;
	addCustomBanner(params).then((res) => {
		if (res.code == 200) {
			message.success('添加成功');
		} else {
			message.error('添加失败');
		}
		if (admin) {
			router.replace({
				path: '/bannerMange/bannerListAdmin'
			});
		} else {
			router.replace({
				path: '/bannerMange/bannerList'
			});
		}
	});
};
</script>

<style lang="less" scoped>
.customBanner-box {
	.tips {
		margin-top: 8px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #f5894e;
	}
	flex: 1;
	display: flex;
	flex-direction: column;
	&-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background: linear-gradient(180deg, #f3f6ff 0%, #fcfdff 100%);
		border-radius: 4px;
		&-content {
			flex: 1;
			position: relative;
			&-box {
				position: absolute;
				overflow-y: auto;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				padding: 20px 20px 80px 20px;
			}
		}
		&-btn {
			line-height: 50px;
			background: #ffffff;
			padding-left: 20px;
			border-radius: 0px 0px 4px 4px;
			border: 1px solid #f0f0f0;
		}
	}

	//

	::v-deep(.n-steps .n-step-indicator) {
		transform: scale(0.8);
	}
	::v-deep(.n-form-item) {
		line-height: 1.4;
	}
}
</style>
